<template>
	<view>
		<view class="shop">
			<view class="top-box">
				<view class="shopdetail_top_one z-padding-32">
					<view class="shopdetail_top_one_left" @click="toaptitude">
						<image :src="cdn(info.logo_image)" class="shop_img z-radius-16 z-margin-r-32" mode="aspectFill" />
						<view class="shopinfo">
							<view class="shopinfo_top">
								<view>{{ info.abbr }}</view>
								<image src="../../static/index/shopid.png" class="shopid z-margin-lr-8 z-flex-0" mode="" />
								<u-icon name="arrow-right" size="10"></u-icon>
							</view>
							<view class="shopinfo_top">
								<view class="ratebox z-padding-lr-24 z-radius-16 z-margin-r-24">
									<image src="../../static/index/star.png" class="starimg" mode="" />
									<view class="z-font-24 z-margin-l-8">{{ tool.toFix(info.commentScore, 1) }}</view>
								</view>
								<view class="text_999 z-font-24">{{ info.followNum }}人关注</view>
							</view>
						</view>
					</view>
					<view class="followed z-flex z-radius-4 z-font-22" v-if="info.followState" @click="collect">已关注</view>
					<view class="follow z-flex z-radius-4 z-font-22" v-else @click="collect">关注</view>
				</view>
				<view class="shop_time_box z-margin-lr-32 z-margin-b-24 z-font-24" v-if="info.trade_hour">
					<view class="shop_time z-radius-16 z-padding-lr-32 z-padding-tb-8">
						<view class="timetext">营业时间：</view>
						<view>{{ info.trade_hour }}</view>
					</view>
				</view>
				<view class="address_box z-padding-tb-24 z-padding-lr-32" v-if="info.to_shop">
					<view class="address_box-left">
						<view class="z-font-24">{{ info.address }}</view>
						<view class="text_999 z-font-24 z-margin-t-8">{{ info.province }}{{ info.city }}{{ info.district }}</view>
					</view>
					<view class="address_box_right z-margin-l-16">
						<view class="line"></view>
						<view class="address_box_right_item" @click="openLoaction">
							<image src="../../static/index/shopposition.png" class="address_box_right_img" mode="" />
							<view class="z-font-22 z-margin-t-16 text_999">导航</view>
						</view>
						<view class="address_box_right_item" @click="call">
							<image src="../../static/index/phone.png" class="address_box_right_img" mode="" />
							<view class="z-font-22 z-margin-t-16 text_999">电话</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="z-flex-x-s-a">
					 <u-tabs
					        :list="tabs"
					        lineWidth="30"
					        lineColor="#68CD86"
							@click="onChange"
					        :activeStyle="{
					            color: '#464647',
					        }"
					        :inactiveStyle="{
					            color: '#838484',
					        }"
					        itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;"
					    >
					    </u-tabs>
				</view>
				<!-- <van-tabs active="{{ active }}" bind:change="onChange" color="#62CB81">
					<van-tab title="全部项目"></van-tab>
					<van-tab title="优惠券"></van-tab>
					<van-tab title="用户评价"></van-tab>
				</van-tabs> -->
				<!-- 项目 -->
				<view class="main-box">
					<scroll-view scroll-y="true" class="scroll z-padding-32" :how-scrollbar="false" enhanced="true" @scrolltolower="more">
						<block v-for="(item,index) in list" v-if="active === 0">
							<service :info="item" :type="2" @serviceTap="serviceTap"></service>
						</block>
						<block v-for="(item,index) in list" v-if="active === 1">
							<coupon :info="item" :type="1" @couponTap="couponTap"></coupon>
						</block>
						<block v-for="(item,index) in list" v-if="active === 2">
							<comment :info="item"></comment>
						</block>
						<u-empty v-if="finish && list.length === 0" mode="暂无内容" icon="http://cdn.uviewui.com/uview/empty/list.png">
						</u-empty>
						<!-- <van-empty description="暂无内容" v-if="{{finish && list.length === 0}}" /> -->
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import service from "@/component/service.vue"
import comment from "@/component/comment.vue"
import coupon from "@/component/coupon.vue"
export default {
	components:{
		service,comment,coupon
	},
	data() {
		return {
			active: 0,
			info: '',
			list: [],
			finish: false,
			loading: false,
			page: 1,
			shop_id: '',
			tabs:[
				{name:'全部项目'},
				{name:'优惠券'},
				{name:'用户评价'}
			]
		};
	},
	onLoad(options) {
		this.shop_id = options.shop_id;
		this.getInfo();
		this.reload();
	},
	methods: {
		collect(){
		    http.get('follow/handlefollow', {
		      follow_id: this.shop_id,
		      type: 2,
		      state: this.info.followState ? 0 : 1
		    }).then(res => {
		      this.info.followState = this.info.followState ? 0 : 1
		      this.info = this.info
		    })
		  },
		  couponTap(e){
		    
		    if(e.detail.type == 1){
		      http.get('coupon/receive', {
		        type: 0,
		        coupon_id: e.detail.info.id
		      }).then(res => {
		        this.util.toast(res.msg)
		        this.reload()
		      })
		    }else if(e.detail.type == 2){
		     this.active = 0
		    }
		  },
		  serviceTap(e){
		    this.util.skip('/service/servedetail/servedetail?id='+e.id+'&shop_id='+this.shop_id)
		  },
		  openLoaction(){
		    uni.openLocation({
		      latitude : Number(this.info.lat),
		      longitude : Number(this.info.lng),
		      name: this.info.address,
		      scale: 18
		    })
		  },
		  call(){
		    uni.makePhoneCall({
		      phoneNumber: this.info.leader_mobile
		    })
		  },
		  toaptitude(){
		    this.util.skip('/service/aptitude/aptitude?shop_id='+this.shop_id)
		  },
		  lowerthreshold2(){
		    console.log('我触底了2')
		  },
		  lowerthreshold1(){
		    console.log('我触底了1')
		  },
		  lowerthreshold(){
		    console.log('我触底了')
		  },
		  onChange(event) {
			console.log(event)
		    this.active = event.index
		    this.reload()
		  },
		  getInfo(){
			  console.log(113)
		    http.get('shop/shopdetail', {
		      id: this.shop_id,
		      page: 1
		    }).then(res => {
		      this.info = res.data
		    })
		  },
		  reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		  },
		
		  getList(){
		    if(this.finish){
		      return 
		    }
		    if(this.loading){
		      return 
		    }
		   this.loading = true
		    let url;
		    if(this.page === 2 && this.active === 0){
		      this.finish = true,
		      this.loading = false
		      return
		    }
		    if(this.active === 0) {
		      url = 'shop/searchShopGoods'
		    }else if(this.active === 1) {
		      url = 'coupon/getlist'
		    }else if(this.active === 2) {
		      url = 'comment/getlist'
		    }
		    http.get(url, {
		      page: this.page,
		      shop_id: this.shop_id
		    }).then(res => {
		      if(res.data.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data)
		      this.list = arr
		      
		    }).finally(res => {
		     this.loading = false
		    })
		  },
	}
};
</script>

<style>
.shop {
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.top-box {
	flex-shrink: 0;
	background: #fff;
	border-bottom: 1px solid rgba(164, 169, 183, 0.2);
}

.shopdetail_top {
	background-color: #fff;
}
.shopdetail_top_one {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.shop_img {
	width: 80rpx;
	height: 80rpx;
}
.shopdetail_top_one_left {
	display: flex;
	align-items: center;
}
.shopinfo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 84rpx;
}
.shopinfo_top {
	display: flex;
	align-items: center;
}
.shopid {
	width: 32rpx;
	height: 32rpx;
}
.ratebox {
	background: rgba(255, 150, 0, 0.1);
	color: var(--mainmoneycolor);
	display: flex;
	align-items: center;
}
.starimg {
	width: 18rpx;
	height: 18rpx;
}
.van-button {
	border-radius: 15rpx !important;
}
.shop_time_box {
	display: flex;
	align-items: center;
	background-color: #fff;
	box-sizing: border-box;
}
.shop_time {
	display: flex;
	align-items: center;
	background-color: #f5f7f9;
}
.follow {
	background: #62cb81;
	width: 112rpx;
	height: 56rpx;
	color: #fff;
}

.followed {
	border: 1px solid #edeef1;
	box-sizing: border-box;
	width: 112rpx;
	height: 56rpx;
	color: #a4a9b7;
}
.timetext {
	color: var(--maingreencolor);
}
.address_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(164, 169, 183, 0.2);
}
.address_box-left {
	display: flex;
	flex-direction: column;
	flex: 2;
}
.line {
	width: 1rpx;
	height: 57rpx;
	background-color: #edeef1;
}
.address_box_right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
}
.address_box_right_item {
	display: flex;
	flex-direction: column;
}
.address_box_right_img {
	width: 40rpx;
	height: 40rpx;
}
.main-box {
	flex: 1;
}
.scroll {
	height: 100%;
	background-color: #edf1f4;
	box-sizing: border-box;
}
</style>
